<script setup>
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'

const htmlContent = ref('<h2>欢迎使用文档编辑器</h2><p>请在此编辑内容...</p>')

function submitContent() {
  fetch('http://127.0.0.1:9000/ai/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ content: htmlContent.value })
  })
    .then(response => response.json())
    .then(data => {
      alert('提交成功: ' + JSON.stringify(data))
    })
    .catch(error => {
      alert('提交失败: ' + error)
    })
}
</script>

<template>
  <h1>文档编辑器（所见即所得）</h1>
  <Editor
    v-model="htmlContent"
    tinymce-script-src="/tinymce/tinymce.min.js"
    :init="{
      height: 600,
      width: '100%',
      menubar: true,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar: 'undo redo | formatselect | bold italic underline backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | image media link',
      language: 'zh_CN',
      language_url: '/tinymce/langs/zh_CN.js'
    }"
    style="width: 100%;"
  />
  <div style="text-align:center; margin-top: 24px;">
    <button @click="submitContent">提交</button>
  </div>
</template>

<style scoped>
/* 可根据需要自定义样式 */
</style>
